<template>
  <div>
    <transition name="router-fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <van-tabbar route v-if="address" :placeholder="true" v-model="active">
      <van-tabbar-item to="/home" icon="bag-o">
        <span>外卖</span>
        <template #icon>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-elment"></use>
          </svg>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
      <van-tabbar-item to="/order" icon="label-o">订单</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
export default {
  data() {
    return {
      address: true,
      addData: ['/home', '/search', '/order', '/user', '/'],
      active: 0,
      transitionName: ''
    }
  },
  methods: {
    userChe() {
      if (this.addData.indexOf(this.$route.path) === -1) {
        this.address = false
      } else {
        this.address = true
      }
    }
  },
  // watch: {
  //   $route(to, from) {
  //     if (to.meta.index > from.meta.index) {
  //       this.transitionName = 'twofade'
  //     } else if (to.meta.index < from.meta.index) {
  //       this.transitionName = 'threefade'
  //     }
  //   }
  // },
  created() {
    this.userChe()
  },
  updated() {
    this.userChe()
  }
}
</script>

<style lang="less" scoped>
.icon {
  width: 0.8rem;
  height: 0.8rem;
}
.router-fade-enter-active,
.router-fade-leave-active {
  transition: opacity 0.3s;
}
.router-fade-enter,
.router-fade-leave-active {
  opacity: 0;
}
/* 过渡 */
.slide-fade-enter-active {
  transition: all 0.8s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
// .twofade-enter {
//   transform: translateX(100%);
// }
// .twofade-enter-active {
//   transition: all 0.3s;
//   position: absolute;
//   height: 100%;
//   background: #ececec;
// }
// .twofade-leave-active {
//   transition: all 0;
//   transition-delay: 0.3s;
//   position: absolute;
// }
// .twofade-leave-to {
//   transform: translateX(-100%);
// }

// .threefade-enter {
//   transform: translateX(-100%);
// }
// .threefade-leave-to {
//   transform: translateX(100%);
// }
// .threefade-enter-active {
//   transition: all 0s;
//   position: absolute;
//   z-index: 2;
// }
// .threefade-leave-active {
//   transition: all 0.3s;
//   position: absolute;
//   z-index: 999;
//   height: 100%;
//   background: #ececec;
// }
</style>
